@import '@/assets/styles/common/variable.scss';
@keyframes frontFlipDown {
  to {
    transform: perspective(px2(500)) rotateX(-0.5turn);
  }
}
@keyframes backFlipDown {
  to {
    transform: perspective(px2(500)) rotateX(0turn);
  }
}
.clock-container {
  position: relative;
  display: flex;
  .divider {
    font-size: px2(100);
    color: #333333;
    line-height: px2(120);
  }
  .flip {
    $borderRadius: px2(10);
    $duration: 0.6s;
    position: relative;
    width: px2(100);
    height: px2(150);
    margin: 0 px2(10);
    border-radius: $borderRadius;
    box-shadow: 0 0 20px rgba(54, 54, 54, 1);
    .digital {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      //background-color: rgba(0,0,0,0.2);
      border-radius: $borderRadius;
      font-family: Helvetica, Arial, sans-serif;
      font-size: px2(120);
      text-align: center;
      line-height: px2(150);
      &::before, &::after {
        content: attr(data-num);
        position: absolute;
        left: 0;
        right: 0;
        overflow: hidden;
        transform-style: preserve-3d;
      }
      &::before {
        top: 0;
        bottom: 50%;
        border-radius: $borderRadius $borderRadius 0 0;
        border-bottom: px2(1) solid #ddd;
      }
      &::after {
        top: 50%;
        bottom: 0;
        line-height: 0;
        border-radius: 0 0 $borderRadius $borderRadius;
      }
      // 0 的 下半部分， 1的上半部分
      &.back::before, &.front::after {
        z-index: 1;
      }
      // 1的下半部分
      &.back::after {
        z-index: 2;
      }
      // 0 的 上半部分
      &.front::before {
        z-index: 3;
      }

      // 1的下半部分
      &.back::after {
        transform-origin: center top;
        transform: rotateX(-0.5turn);
      }
      &.front::before {
        transform-origin: center bottom;
        backface-visibility: hidden;
      }
    }
    &.running {
      .back::after {
        animation: backFlipDown $duration ease-in-out forwards;
      }
      .front::before {
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
        animation: frontFlipDown $duration ease-in-out forwards;
      }
    }
  }
}
